<template>
  <div class="main">

    <div class="shadow"></div>


    <div class="headerbox">

      <div class="headeritem">
        <div class="iconbox">
          <img src="../../../assets//image/myaccount/zijin.png" alt="">
          <span>账户资金</span>
        </div>
        <div class="zijinbox">
          <div class="ad">
            <div class="text">广告金（元）</div>
            <div class="num">0</div>
          </div>
          <div class="ad huokuan">
            <div class="text">可用货款（元）</div>
            <div class="num">0</div>
          </div>
          <div class="button">充值</div>
        </div>
      </div>
     
      <!-- <div class="headeritem">
        <div class="iconbox">
          <img src="../../../assets//image/myaccount/fuwufei.png" alt="">
          <span>服务费</span>
        </div>
        <div class="fuwubox">
          <div class="text">您还未缴纳服务费</div>
          <div class="text1">
            缴纳1000元服务费即可开通服务费商家（不可退还），享诚信供应商专属权益!
          </div>
          <div class="text2">了解诚信供应商权益>></div>
          <div class="button">立即开通</div>
        </div>
      </div>

      <div class="headeritem">
        <div class="iconbox">
          <img src="../../../assets//image/myaccount/baozhengjin.png" alt="">
          <span>诚信商保证金</span>
        </div>
        <div class="fuwubox">
          <div class="text">您还未开通诚信商家</div>
          <div class="text1">
            缴纳3000元诚信保证金即可开通诚信供应商（保证金可随时退还），享诚信供应商专属权益!
          </div>
          <div class="text2">了解诚信供应商权益>></div>
          <div class="button">立即开通</div>
        </div>
      </div> -->

    </div>

    <div class="tabbox">
      <div class="tab" :class="activeindex == 0 ? 'activetab' : ''" @click="activeindex = 0">广告金记录</div>
      <div class="tab" :class="activeindex == 1 ? 'activetab' : ''" @click="activeindex = 1">余额记录</div>
    </div>

    <div class="handlebox">
      
      <div class="inputbox">
        <span>交易单号</span>
        <el-input v-model="paycode" placeholder="请输入"></el-input>
      </div>

      <div class="datebox">
        <span>交易时间</span>
        <el-date-picker
          v-model="date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="请选择"
          end-placeholder="请选择"
          align="right">
        </el-date-picker>
      </div>

      <div class="selectbox">
        <span>交易类型</span>
        <el-select v-model="paytype" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="buttonbox">
        <div class="reset">
          <i class="el-icon-refresh"></i>
          <span>重置</span>
        </div>
        <div class="search">
          <i class="el-icon-search"></i>
          <span>搜索</span>
        </div>
      </div>

    </div>

    <div class="tablebox">

      <div class="table">
        <el-table :data="tableData" style="width: 100%;color: #999999;" :header-cell-style="{background:'#EBEFF5',color:'#000000'}">
          <el-table-column prop="code" label="交易单号" ></el-table-column>
          <el-table-column prop="type" label="交易类型" ></el-table-column>
          <el-table-column prop="num" label="交易金额" ></el-table-column>
          <el-table-column prop="prev" label="交易前余额" ></el-table-column>
          <el-table-column prop="next" label="交易后余额" ></el-table-column>
          <el-table-column prop="time" label="交易时间" ></el-table-column>
          <el-table-column prop="date" label="操作" >
            <template slot-scope="scope">
              <span style="color: #399EF1;">详情</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination">
        <el-pagination
          background
          style="font-size:0.13rem;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>

      </div>

  </div>
</template>

<script>
export default {
  created () {},
  data() {
    return {
      activeindex: 0,
      paycode: '',
      paydate: '',
      paytype: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      tableData: [
     
      ],
      currentPage: 1,
    }
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
.main {
  width: calc(100%);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background: #FFFFFF;
  .shadow{
    flex-shrink: 0;
    width: 100%;
    height: 0.2rem;
    // background: #F5F5F5;
    background: linear-gradient(0deg,#FFFFFF , #F5F5F5);
  }
  .headerbox{
    padding: 0 0.2rem;
    width: calc(100% - 0.4rem);
    height: 2.54rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .headeritem{
      width: 5.28rem;
      height: 2.54rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .iconbox{
        width: 100%;
        height: 0.48rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 0.24rem;
        color: #000000;
        img{
          width: 0.36rem;
          height: 0.36rem;
          margin-right: 0.06rem;
        }
      }
      .zijinbox{
        width: 5.28rem;
        height: 2.06rem;
        background: #F4F9FF;
        position: relative;
        .ad{
          width: auto;
          height: auto;
          display: flex;
          flex-direction: column;
          color: #000000;
          position: absolute;
          top: 0.3rem;
          left: 0.96rem;
          .text{
            font-size: 0.14rem;
            margin-bottom: 0.15rem;
          }
          .num{
            font-size: 0.36rem;
          }
        }
        .huokuan{
          position: absolute;
          top: 0.3rem;
          left: 3.34rem;
        }
        .button{
          width: 1.6rem;
          height: 0.36rem;
          line-height: 0.36rem;
          text-align: center;
          border-radius: 0.4rem;
          background: #FFFFFF;
          border: 0.01rem solid #A7ADB8;
          font-size: 0.16rem;
          position: absolute;
          top: 1.36rem;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      .fuwubox{
        width: 5.28rem;
        height: 2.06rem;
        background: #F4F9FF;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #000000;
        .text{
          font-size: 0.16rem;
          margin-bottom: 0.09rem;
        }
        .text1{
          width: 3.78rem;
          text-align: center;
          font-size: 0.14rem;
          margin-bottom: 0.09rem;
        }
        .text2{
          font-size: 0.14rem;
          color: #E22A1F;
          margin-bottom: 0.09rem;
          cursor: pointer;
        }
        .button{
          width: 1.6rem;
          height: 0.36rem;
          line-height: 0.36rem;
          text-align: center;
          border-radius: 0.4rem;
          background: #FFFFFF;
          border: 0.01rem solid #A7ADB8;
          font-size: 0.16rem;
        }
      }
    }
  }
  .tabbox{
    padding: 0 0.2rem;
    width: calc(100% - 0.4rem);
    height: 0.8rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .tab:first-child{
      margin-left: 0rem;
    }
    .tab{
      width: 1.64rem;
      height: 0.4rem;
      border-radius: 0.4rem;
      background: #F5F7F9;
      line-height: 0.4rem;
      text-align: center;
      font-size: 0.2rem;
      color: #666666;
      margin-left: 0.2rem;
      cursor: pointer;
    }
    .activetab{
      color: #E22A1F;
    }
  }
  .handlebox{
    margin: 0.2rem auto 0 0.2rem;
    padding: 0rem 0.2rem;
    width: 15.84rem;
    height: 0.86rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.14rem;
    color: #000000;
    border: 0.01rem solid #E8E8E8;
    .inputbox{
      width: 3.8rem;
      height: 0.42rem;
      background: #F5F7F9;
      display: flex;
      align-items: center;
      span{
        margin: 0rem 0.1rem 0 0.2rem;
      }
      .el-input{
        flex: 1;
      }
      ::v-deep .el-input__inner{
        background: none !important;
        border: none !important;
      }
    }
    .datebox{
      width: 4.2rem;
      height: 0.42rem;
      background: #F5F7F9;
      display: flex;
      align-items: center;
      span{
        margin: 0rem 0.1rem 0 0.2rem;
      }
      .el-input{
        flex: 1;
      }
      ::v-deep .el-input__inner{
        background: none !important;
        border: none !important;
      }
      ::v-deep .el-range-input{
        background: none !important;
      }
      ::v-deep .el-date-editor--datetimerange.el-input__inner{
        width: 3rem !important;
      }
    }
    .selectbox{
      width: 4rem;
      height: 0.42rem;
      background: #F5F7F9;
      display: flex;
      align-items: center;
      span{
        margin: 0rem 0.1rem 0 0.2rem;
      }
      .el-select{
        flex: 1;
      }
      ::v-deep .el-input__inner{
        background: none !important;
        border: none !important;
      }
    }
    .buttonbox{
      width: 2.3rem;
      height: 0.42rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.14rem;
      .reset{
        width: 1.04rem;
        height: 0.42rem;
        border-radius: 0.02rem;
        background: #F5F7F9;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666666;
        span{
          margin-left: 0.04rem;
        }
      }
      .search{
        width: 1.04rem;
        height: 0.42rem;
        border-radius: 0.02rem;
        background: #E22A1F;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        span{
          margin-left: 0.04rem;
        }
      }
    }
  }
  .tablebox{
    margin: 0 auto 0 0.2rem;
    padding: 0.15rem 0.2rem;
    width: 15.84rem;
    min-height: 4.62rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border: 0.01rem solid #E8E8E8;
    border-top: none;
    .table{
      width: 100%;
      height: auto;
    }
    .pagination{
      width: 100%;
      height: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
        background-color: #E22A1F !important;
      }
      ::v-deep .el-pager li{
        width: 0.4rem !important;
        height: 0.4rem !important;
        line-height: 0.4rem !important;
        border-radius: 0.04rem !important;
      }
      
      ::v-deep .el-pagination span{
        height: 0.4rem !important;
        line-height: 0.4rem !important;
      }
      ::v-deep .el-pagination button{
        width: 0.4rem !important;
        height: 0.4rem !important;
        line-height: 0.4rem !important;
        border-radius: 0.04rem !important;
      }
    }
  }
}
</style>
